<template>
  <div class="api-debug ">
    <div class="api-debug-head  flex-row-between">
      <div class="flex-row-center text-nowrap">
        <span class="blod margin-right-20px">接口调试</span>
      </div>
      <div class="action flex-row-center">
        <span v-if="resStr" class="btn-text" @click="useRes()" title="同步至接口返回参数">
          <Icon class="icon " type="refresh"></Icon>同步
        </span>
        <span v-if="!ajax" class="btn-text flex-row-center" @click="apiDebug()">
          <Icon class="icon icon-mini" type="debug"></Icon>启动
        </span>
        <span v-if="ajax" class="btn-text flex-row-center" @click="apiDebug(true)">
          <Icon class="icon icon-mini" type="debug"></Icon>停止
        </span>
      </div>
    </div>
    <div class="param-box">
      <IDE class="view" v-model="api.paramSet">
        <template #title><span :title="tips.paramSetTips">参数设置</span></template>
      </IDE>
      <IDE class="view" v-if="!resStr" v-model="api.resultSet">
        <template #title> <span :title="tips.resultSetTips">返回值</span></template>
      </IDE>
      <IDE class="view" v-if="resStr" v-model="resStr">
        <template #title>
          <span class="label-auto flex-row-center text-nowrap">
            调试结果
          </span>
        </template>
        <template #action>
          <span class="flex-row-center" @click="setRes(null)"> <Icon class="icon-gray click" type="close" /> </span>
        </template>
      </IDE>
      <transition name="anim-opacity">
        <div class="abs loading flex-column" size="large" fix v-if="ajax">
          <div class="flex-center"><Icon type="refresh" class="ajax-loading"></Icon>Loading...</div>
          <div class="aux-mini">仅支持同域请求和服务器跨域模式</div>
          <!-- <div class="aux-mini" v-if="ajax">
                <span class="btn-text flex-row-center" @click="apiDebug(true)">
                  <Icon class="icon icon-mini" type="debug"></Icon>停止
                </span>
              </div> -->
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
// import DB from "./ApiCache";
let components = {};
export default {
  // mixins: [DB],
  components,
  props: ["apiData", "apiDoc"],
  data() {
    return {
      tips,
      api: this.apiData || {},
      ajax: null,
      res: null
    };
  },
  watch: {},
  computed: {
    resStr() {
      let res = this.res;
      if (!this.res) {
        return "";
      }
      let resStr = "";
      if (typeof res === "object") {
        resStr = JSON.stringify(res, null, 2);
      } else {
        resStr = res;
      }
      return resStr || "";
    },
    url() {
      let baseURL = (this.apiDoc || {}).baseURL;
      let url = (this.apiData || {}).url;
      return [baseURL, url].join("/");
    }
  },

  methods: {
    sync() {},
    paramFormat(key) {
      if (this.api[key] && this.api[key].indexOf("{") >= 0) {
        try {
          try {
            let obj = JSON.parse(this.api[key]);
            this.api[key] = JSON.stringify(obj, null, 1);
          } catch (error) {
            window.eval("window.paramEval=" + this.api[key]);
            this.api[key] = JSON.stringify(window.paramEval, null, 1);
          }
        } catch (error) {
          window.alert(`仅支持Json,Object类型的参数格式化\n异常详情:\n` + error.message);
        }
      }
    },
    apiDebug(cancel) {
      this.ajax && this.ajax.cancel("取消调试");
      this.ajax = window.axios.CancelToken.source();
      if (cancel) {
        return (this.ajax = false);
      }
      let param = {
        ...this.api,
        baseURL: this.apiDoc.baseURL,
        cancelToken: this.ajax.token
      };
      window.apiDebug(param, this.ajax).then((result) => {
        // setTimeout(ev => (this.ajax = null), 1000);
        this.ajax = null;
        this.res = result;
      });
    }
  }
};
let tips = {
  url: `输入api地址(示例:query/data)`
};
tips.paramTips = `填写请求参数;示例:\n{
  keyword: "查询关键字",
  limit: 10,
  page: 1
}
`;

tips.paramDescTips = `填写参数说明;示例:
{
  keyword: "",//查询关键字
  limit: 10,//分页每页条数(10条)
  page: 1,//分页页码(第一页)
}
`;
tips.paramCreateTips = `前端脚本构建请求参数;示例:
function() {
  return {
    keyword: "",
    limit: 10,
    page: 1
  };
} `;
tips.requestHeaderTips = `填写附加的请求头信息;示例:
{
 'content-type': 'application/x-www-form-urlencoded'
}
`;
tips.resultTips = `填写返回参数;示例:
{
  code: "0",
  data: ["Test19"],
  total:1,
  message: "查询成功"
}
`;

tips.httpHead = `填写请求头;示例:
{
  "Content-Type": "multipart/form-data",
  "Content-Type": "application/json;charset=UTF-8"
}
`;
tips.resultCreateTips = `前端脚本构建返回结果;示例:
function() {
  return {
    code: "0",
    data: ["Test19"],
    total:1,
    message: "查询成功"
  };
} 
`;
</script>
<style></style>
